<template>
	<div class="create">
		<div class="header">
			<router-link tag="div" to="/openFunction" class="back-icon iconfont">
				&#xe624;
			</router-link>
			<div class="title">配送信息</div>
		</div>
		
		<div class="dispatchType">
			<div class="type">配送团队</div>
			<div class="typeText">蜂鸟专送</div>
		</div>
		<div class="map-warrp">
			<!--<baidu-map class="map"
				@ready="handler"
				:center="center"
				:zoom="zoom"
			>
				<bm-geolocation   anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true"></bm-geolocation>
				
			</baidu-map>-->
		</div>
		
		<div class="dispatch-content">
			<div class="content-item">
				<div class="title title-is">
					<div class="title-con">配送范围1</div>
				</div>
				<div class="price">
					<div class="is-ok is-ok-ok">生效中</div>
					<div class="price-num price-num-is">起送费￥20.0 | 动态 <span class="iconfont">&#xe600;</span></div>
				</div>
				<div class="range">
					<div class="btn" v-if="false">显示范围</div>
				</div>
			</div>
			<div class="content-item">
				<div class="title">
					<div class="title-con">配送范围1</div>
				</div>
				<div class="price">
					<div class="is-ok">生效中</div>
					<div class="price-num">起送费￥20.0 | 动态 <span class="iconfont">&#xe600;</span></div>
				</div>
				<div class="range">
					<div class="btn">显示范围</div>
				</div>
			</div>
		</div>
		
		<div class="link-btn">
			<div class="btn-text">啊宝外卖管理</div>
			<div class="btn-icon iconfont icon-fanhui"></div>
		</div>
		<group label-width="5.5em" label-margin-right="2em" style="margin: 0;">
			<popup-radio  title="报名方式" :options="team" v-model="currentTeam">
		    		<p slot="popup-header" class="vux-1px-b demo3-slot" style="text-align: center;padding: 8px 0;color: #888;">请选择</p>
		    </popup-radio>
			<popup-radio  title="配送范围" :options="ranges" v-model="currentRange">
		    		<p slot="popup-header" class="vux-1px-b demo3-slot" style="text-align: center;padding: 8px 0;color: #888;">请选择</p>
		    </popup-radio>
			<popup-radio  title="起送费设置" :options="startPrice" v-model="currentPrice">
		    		<p slot="popup-header" class="vux-1px-b demo3-slot" style="text-align: center;padding: 8px 0;color: #888;">请选择</p>
		    </popup-radio>
		</group> 
		
		<div class="footer">
			如有疑问，请联系业务经理或客服 : <span class="phone">18912548978</span>
		</div>

	</div>
</template>

<script type="text/javascript">
	import { PopupRadio , GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, ChinaAddressData, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		name : 'foodDispatch',
		data(){
			return{
				team       :['蜂鸟专送'],
				ranges     :['5','10','15'],
				startPrice :['5','10','15','20'],
				currentTeam:'',
				currentRange: '',
				currentPrice: '',
				center: '西安',
      			zoom: 15
			}
		},
		methods:{
			handler ({BMap, map}) {
			    console.log(BMap, map)
//			    this.center.lng = 11.04
//			    this.center.lat = 22.32
			    this.zoom = 15
   			}
		},
		components:{
			Group,
	        GroupTitle,
	        Cell,
	        XInput,
	        Selector,
	        PopupPicker,
	        XAddress,
	        Datetime,
	        XNumber,
	        XTextarea,
	        XSwitch,
	        PopupRadio 
		}

	}
</script>
<style lang="less" scoped>
	.create /deep/ .weui-cells{
		margin: 0;
	}
	.create{
		text-align: left;
		.header{
			position: relative;
			display:flex;
			height:.9rem;
			line-height: .9rem;
			color:#fff;
			background:#ff1351;
			font-size:.34rem;		
			.back-icon{
				position: absolute;
				left: 0;
				top: 0;
				height: .9rem;
				padding:0 .2rem;
			}
			.title{
				flex:1;
				text-align: center;
			}
		}
		
		.dispatchType{
			overflow: hidden;
			height: 1.12rem;
			line-height: 1.12rem;
			display: flex;
			background: #fff;
			font-size: .36rem;
			.type{
				padding-left: .28rem;
				flex: 1;
				color: #8d8d8d;
			}
			.typeText{
				padding-right: .28rem;
				min-width: 1.5rem;
			}
		}
		
		.map-warrp{
			overflow: hidden;
			width: 100%;
			height: 5rem;
			background: #fff;
			.map{
				width: 100%;
				height: 5rem;
			}
		}
		
		.link-btn{
			display: flex;
			overflow: hidden;
			padding: 0 .3rem;
			height: .9rem;
			line-height: .9rem;
			background: #fff;
			.btn-text{				
				flex: 1;
			}
			.btn-icon{
				width: .56rem;
				text-align: right;
				font-size: .2rem;
				color: #ababab;
				font-weight: 500;
			}
		}
		.dispatch-content{
			overflow: hidden;
			padding: 0 .34rem;
			background: #fff;
			.content-item{
				display: flex;
				height:1.3rem;
				font-size:.24rem;
				.price,.range{
					margin-top: .2rem;					
				}
				.title{
					margin-top: .2rem;
					min-width: 1.35rem;
					height: .42rem;
					line-height: .42rem;
					text-align: center;
					background: #d3ccc5;
					border-radius: .08rem;
					color: #fff;
				}
				.title-is{
					background: #ff5a5a;
				}
				.price{
					flex: 1;
					margin: .2rem .3rem 0 .3rem;
					color: #cfcfcf;
					.iconfont{
						font-size: .24rem;
					}
					.is-ok,.price-num{
						line-height: .42rem;
					}
					.is-ok-ok{
						height: .42rem;
						width: .85rem;
						line-height: .42rem;
						background: eff8ea;
						color: #7bcb56;
						text-align: center;
					}
					.price-num-is{
						color: #000;
					}
				}
				.range{
					text-align: right;
					color: #bc0014;
				}
			}
		}
		.footer{
			height: 1.5rem;
			line-height: 1.5rem;
			text-align: center;
			color: #a4a4a4;
			background: #fff;
			font-size: .22rem;
			.phone{
				color: #c71d2e;
			}
		}
		

	}
</style>